<template>
  <div class="order-detail">
    <div class="head-bg"></div>
    <c-title :hide="false" :text="text"></c-title>
    <div v-if="orderType != 'ysSystem'" id="goodsinfo" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <div class="addr" :class="jurisdiction_set == 1 ? 'addr1' : ''" style="display: block;" v-if="orderType != 'event-registration'">
        <div style="display: flex;">
          <i class="iconfont icon-dizhi1" v-if="show_dizhi()"></i>
          <ul class="addr-info">
            <template v-if="orderType == 'DeliveryReplenish' && !this.fun.isTextEmpty(this.service_station)">
              <li style="margin-bottom: 0.5rem; font-size: 16px;">服务站：{{ service_station.service_name }} （{{ service_station.mobile }}）</li>
              <li style="color: #999;">
                {{ service_station.full_address }}
              </li>
              <div style="border-bottom: 1px solid #ebebeb; height: 0.5rem;"></div>
            </template>
            <template v-if="order_data.dispatch_type_id == 8 && !this.fun.isTextEmpty(order_data.package_deliver)">
              <li style="margin-bottom: 0.5rem; font-size: 14px;">{{package_deliver.custom_consignee}}：{{ receiver }} {{ mobile }}</li>
              <li style="margin-bottom: 0.5rem; font-size: 14px;">提货点：{{ package_deliver.deliver_name }} {{ package_deliver.deliver_mobile }}</li>
              <li style="color: #333;">
                {{ package_deliver.full_address }}
              </li>
              <div class="map-navigation" v-if="!fun.isTextEmpty(package_deliver.lng) && !fun.isTextEmpty(package_deliver.lat)">
                <i @click.stop="goToAdress" class="iconfont icon-all_daohang"></i>
              </div>
            </template>
            <template v-if="order_data.dispatch_type_id == 8 && this.fun.isTextEmpty(order_data.package_deliver)">
              <li style="margin-bottom: 0.5rem; font-size: 14px;">
                获取收货信息出错了，请联系客服！
              </li>
            </template>
            <template v-if="order_data.dispatch_type_id == 11 && order_data.city_delivery">
              <div style="margin-bottom: 0.3rem; font-size: 14px;" v-if="order_data.city_delivery.is_expect == 1">
                送达时间：{{ order_data.city_delivery.expect_start_time }} - {{ order_data.city_delivery.expect_end_time }}
              </div>
              <div style="margin-bottom: 0.3rem; font-size: 14px;" v-if="order_data.city_delivery.community_name">送达社区：{{ order_data.city_delivery.community_name }}</div>
            </template>
            <template v-if="order_data.dispatch_type_id == 15 && !this.fun.isTextEmpty(order_data.package_delivery)">
              <li class="preorder-store-area" >
                <i class="iconfont icon-dizhi1" style="margin-right: 0.1875rem;"></i>
                <span>{{fun.getCustomTextLang('package_delivery.preorder_store_area','提货点')}}：{{ receiver }} {{ mobile }}</span>
              </li>
              <li style="color: #00001C;font-size: 0.8125rem;">
                {{ address }}
              </li>
              <li style="margin-bottom: 0.5rem; font-size: 14px;">{{fun.getCustomTextLang('package_delivery.preorder_buyer_name','提货人')}}：{{ package_deliver.buyer_name }} {{ package_deliver.buyer_mobile }}</li>
              <div class="map-navigation" v-if="!fun.isTextEmpty(package_deliver.lng) && !fun.isTextEmpty(package_deliver.lat)">
                <i @click.stop="goToAdress" class="iconfont icon-all_daohang"></i>
              </div>
            </template>
            <template v-if="order_data.dispatch_type_id != 8 && order_data.dispatch_type_id != 15">
              <!-- 供应商订单是否显示会员信息，为1不显示 -->
              <div v-if="jurisdiction_set != 1">
                <template v-if="orderType === 'sachertorte'">
                  <li style="margin-bottom: 0.5rem; font-size: 14px;" v-if="supplyCakeOrder.buyer_phone">订货人手机号：{{ supplyCakeOrder.buyer_phone }}</li>
                  <li style="margin-bottom: 0.5rem; font-size: 14px;" v-if="supplyCakeOrder.ship_date && supplyCakeOrder.ship_type !== 'same'">配送日期：{{ supplyCakeOrder.ship_date }}</li>
                  <li style="margin-bottom: 0.5rem; font-size: 14px;" v-if="supplyCakeOrder.ship_time_text && supplyCakeOrder.ship_type !== 'same'">配送日期：{{ supplyCakeOrder.ship_time_text }}</li>
                </template>
                <template v-else>
                  <li style="margin-bottom: 0.5rem; font-size: 14px;" v-if="order_data.order_address && order_data.order_address.delivery_day">配送日期：{{ order_data.order_address && order_data.order_address.delivery_day  }}</li>
                  <li style="margin-bottom: 0.5rem; font-size: 14px;" v-if="order_data.order_address && order_data.order_address.delivery_time">配送时间：{{ order_data.order_address && order_data.order_address.delivery_time }}</li>
                </template>

                <li v-if="!receiver && !address">
                  <i class="iconfont icon-dizhi1" style="margin-right: 0.2188rem;"></i>
                  <span>无需收货地址 如信息出错请联系客服！</span>
                 </li>
                <li class="supplier-member" v-if="receiver">
                  <i class="iconfont icon-dizhi1" style="margin-right: 0.2188rem;"></i>
                  <span class="supplier-member-receiver">{{recipientText}}：{{ receiver }}</span>
                  <span class="supplier-member-mobile">{{ mobile }}</span>
                </li>
                <li v-if="order_data.ecpay_logistics && order_data.ecpay_logistics.number">收件人门市代号: {{ order_data.ecpay_logistics.number }}</li>
                <li v-if="order_data.ecpay_logistics && order_data.ecpay_logistics.name">收件人物流类型: {{ order_data.ecpay_logistics.name }}</li>
                <li style="color: #999;" v-if="order_data.plugin_id == 130">预约时间：{{ order_data.reserve_simple.begin_time }}</li>
                <li style="color: #00001C;display:flex;align-items: center;"  v-if="orderType == 'hotel'">
                  <i class="iconfont icon-dizhi1"></i>
                  <span style="margin-right: 0.3125rem;"> {{ hotel_name | escapeTitle }} </span>
                </li>
                <li style="color: #00001C;display:flex;align-items: center;" >
                   <i class="iconfont icon-dizhi1" v-if="!receiver&&address"></i>{{ address }}</li>
              </div>
            </template>
            <template v-if="order_data.other_order_data">
              <li style="color: #999;" v-for="(_other,_othderIndex) in order_data.other_order_data" :key="_othderIndex">{{_other.name}}</li>
            </template>
          </ul>
        </div>
        <div v-if="address != '' && (orderType == 'storeMang'||(orderType == 'supplier' && jurisdiction_set != 1))" class="operation-style">
          <div class="copy-box">
            <div @click="clickPhone(mobile)" class="contact-recipient" v-if="mobile">
              <a :href="'tel:' + mobile" ref="telPhone"></a>
              <i class="iconfont icon-fontclass-rengezhongxin"></i>
              <span>联系收件人</span>
            </div>
            <div class="copy-address" v-clipboard:copy="receiver + ' ' + mobile + ' ' + address" v-clipboard:success="copySuccess" v-clipboard:error="copyError">
              <i class="iconfont icon-service_n"></i>
              <span>复制地址</span>
            </div>
          </div>
        </div>
      </div>
      <div class="addr" style="justify-content: space-between;" v-if="aggregation_cps_recharge_bill">
        <p>充值号码</p>
        <p style="color: #ff2424;">{{ aggregation_cps_recharge_bill }}</p>
      </div>
      <template v-if="order_data.camilo_resources_coupon_type == 1 && order_data.plugin_id != 130 && order_data.camilo_resources_recharge_number">
        <!--plugin_id130是分支预约商品-->
        <!-- 直冲订单 -->
        <div class="addr" style="justify-content: space-between; flex-wrap: wrap;">
          <p>充值账号</p>
          <p class="addrTxt">{{ order_data.camilo_resources_recharge_number }}</p>
        </div>
      </template>
      <div class="addr" style="justify-content: space-between;" v-if="phone_bill.mobile">
        <p>充值手机号</p>
        <p style="color: #ff2424;">{{ phone_bill.mobile }}</p>
      </div>
      <div class="addr" style="justify-content: space-between;" v-if="electricity_bill_pro">
        <p>充值户号</p>
        <p class="addrTxt" v-if="electricity_bill_pro.has_one_account">{{ electricity_bill_pro.has_one_account.account_number }}</p>
      </div>
      <div class="addr-shopApply" style="flex-direction:column" v-if="order_data.other_order_data && orderType=='event-registration'">
        <p>报名学员：{{order_data.other_order_data.student_name}}</p>
        <p >截至时间：{{order_data.other_order_data.end_time}}</p>
      </div>

      <!-- 油卡充值 -->
      <template v-if="oil_recharge">
        <div class="addr" style="flex-direction: column;" v-if="oil_recharge.account">
          <div style="display: flex;">
            <p>充值油卡号</p>
            <p style="padding-left: 8px;">{{ oil_recharge.account }}</p>
          </div>
          <div style="display: flex; margin-top: 0.5rem;">
            <p>充值手机号</p>
            <p style="padding-left: 8px;">{{ oil_recharge.mobile }}</p>
          </div>
        </div>
      </template>

      <div class="wrapper-box">
        <div class="goods-box"  v-if="order_data.plugin_id === 154">
          <div  class="goods-wrapper" v-for="(good, i) in order_data.has_many_travel_around_order_goods" :key="i" @click="toGoodsDetail(good, order_data.is_virtual, good.is_course)">
            <div class="goods">
            <div class="img">
              <img :src="good.option_img" referrerPolicy="no-referrer"/>
            </div>
            <div class="goods-right">
              <ul class="inner flex-j-sb">
              <div class="inner-title">
                <div class="name">{{ good.title | escapeTitle }}</div>
                <div class="num" v-if="!(orderType == 'hotel')">×{{ good.total }}</div>
                <div class="num" v-if="orderType == 'hotel'">{{ night_day }}晚{{ order_data.goods_total }}间</div>
              </div>
              <div class="option inner-title">
                <p v-show="good.option_title">{{ $i18n.t('base.specification') }}: {{ good.option_title }}</p>
              </div>
              </ul>
              <ul class="price">
                <div class="reserveClass"  v-if="reserveDate">预约日期：{{ reserveDate }}</div>
                <li class="money">
                  <div class="current-price">
                    <template v-if="good.after_sales && good.after_sales.refunded_total > 0">
                      <span class="deposit-tips" v-if="good.after_sales.refund_id != 0"
                        >{{ good.after_sales.refund_type_name }}:{{ good.after_sales.refund_status_name }} x {{ good.after_sales.refunded_total }}</span
                      >
                      <span class="deposit-tips" v-if="good.after_sales.refund_id == 0">已退款 x {{ good.after_sales.refunded_total }}</span>
                    </template>

                    <small>{{ $i18n.t("money") }}</small>
                    {{ good.goods_price }}
                  </div>
                </li>
                <div class="give_integral_wrapper" v-if="good.points && orderType !== 'travelAround'">
                  <div class="give_integral_text">送</div>
                  <div class="give_integral_num">{{ good.points }}{{ integral }}</div>
                </div>
              </ul>
            </div>

            <div class="comment-box" v-if="good.buttons&&good.buttons.length!==0">
              <div v-for="(btn, index) in good.buttons" :key="index" :class="btn.value == 2 ? 'view-comment-btn' : 'comment-btn'" @click.stop="evaluateOpration(btn, good, order_data)">
                {{ btn.name }}
              </div>
            </div>
            <div style="clear: both;"></div>
            </div>
          </div>

        </div>
        <div class="goods-box" v-else>
          <div v-for="(good, i) in order_data.has_many_order_goods" :key="i" @click="toGoodsDetail(good, order_data.is_virtual, good.is_course)" class="goods-wrapper">
            <div class="goods" >
              <div class="img">
                <img :src="good.thumb" referrerPolicy="no-referrer"/>
              </div>
              <div class="goods-right">
                <div class="inner">
                  <div class="inner-title">
                    <div class="name" v-if="!order_data.deposit_ladder">{{ good.title | escapeTitle }}</div>
                    <div class="num" v-if="!(orderType == 'hotel')">×{{ good.total }}</div>
                  </div>
                  <!--判断定金活动尾款-->
                  <div class="name" v-if="order_data.deposit_ladder">{{ order_data.deposit_ladder.activity_name | escapeTitle }}</div>
                  <div class="option">
                    <p v-show="order_data.is_virtual == 0 && good.goods_option_title">{{ $i18n.t('base.specification') }}: {{ good.goods_option_title }}</p>
                    <div class="num" v-if="orderType == 'hotel'">{{ night_day }}晚{{ order_data.goods_total }}间</div>
                  </div>
                </div>
                <ul class="price" :class="{'between':good.diyform_data}">
                  <div class="price-box">
                    <div  class="reserveClass" v-if="reserveDate">预约日期：{{ reserveDate }}</div>
                    <li class="money">
                      <div class="current-price">
                      <!--判断定金活动-->
                        <span class="deposit-tips" v-if="order_data.plugin_id == 108">定金</span>
                        <!--判断定金活动尾款-->
                        <span class="deposit-tips" v-if="order_data.deposit_ladder">尾款</span>
                        <template v-if="good.payment_amount==good.goods_price">{{ $i18n.t("money") }}{{ good.payment_amount }}</template>
                        <template v-else>{{ $i18n.t('base.actualPayment') }}{{ $i18n.t("money") }}{{ good.payment_amount }}<span style="color:#9898A1;font-size: 0.8125rem;margin-left: 0.1875rem;">{{ $i18n.t("money") }}{{ good.goods_price }}</span></template>

                      </div>
                      <div class="member-info">
                        <div class="vipPirce" v-if="vip_show">
                          会员价:{{ $i18n.t("money") }}{{ good.vip_price }}
                        </div>
                        <div class="member-integral" v-if="good.points && orderType !== 'travelAround'">送{{ good.points }}{{ integral }}</div>
                      </div>
                      <template v-if="good.after_sales && good.after_sales.refunded_total > 0">
                        <div class="deposit-tips" v-if="good.after_sales.refund_id != 0"
                          >
                          <span>{{ good.after_sales.refund_type_name }}:{{ good.after_sales.refund_status_name }} x {{ good.after_sales.refunded_total }}</span>
                          </div
                        >
                        <div class="deposit-tips" v-if="good.after_sales.refund_id == 0">
                          <span>已退款 x {{ good.after_sales.refunded_total }}</span>
                        </div>
                      </template>
                      <template v-if="order_data.cloud_shop && order_data.cloud_shop.service_note_list">
                        <div class="cloud_service_notes" v-if="order_data.cloud_shop.service_note_list[good.id]">
                          <div class="notes" @click.stop="tap_noteShow(note)" v-for="note in order_data.cloud_shop.service_note_list[good.id]" :key="note.id">{{ note.name }}
                            <i class="iconfont icon-advertise-next"></i>
                          </div>
                        </div>
                      </template>
                    </li>
                    <li class="money" v-if="order_data.plugin_id == 40">
                      <span>押金:</span><small>{{ $i18n.t("money") }}</small>
                      {{ good.lease_toy_goods.deposit }}
                    </li>
                  </div>

                </ul>
              </div>
            </div>
            <!--赛事报名不需要评价功能-->
            <div class="comment-box" v-if="(good.diyform_data||(good.buttons&&good.buttons.length!==0)) && orderType != 'event-registration'">
              <div class="dfStyle"  v-if="good.diyform_data"  @click.stop="lookDFData(good.diyform_data)">查看表单</div>
              <div v-for="(btn, index) in good.buttons" :key="index" :class="btn.value == 1 ?  'comment-btn' :'view-comment-btn' " @click.stop="evaluateOpration(btn, good, order_data)">
                {{ btn.name }}
              </div>
            </div>

          </div>
        </div>
        <div class="tbs">
          <div class="tbs-number-tra">
            <ul class="tra" v-if="checkPlugin_id(order_data.plugin_id)">
              <li class="left">租期</li>
              <li class="right">{{ checkPluginTxt(order_data.plugin_id,order_data) }}天</li>
            </ul>
            <ul class="tra" v-if="checkPlugin_id(order_data.plugin_id)">
              <li class="left">租赁到期日期</li>
              <li class="right">{{ checkPluginTxt_time(order_data.plugin_id,order_data) }}</li>
            </ul>
            <ul class="tra">
              <li class="left">{{ $i18n.t('base.transactionStatus') }}</li>
              <li class="right" v-if="order_data.plugin_id == 130">{{ order_data.status == 2 ? "待核销" : order_data.status_name }}</li>
              <li class="right" v-else-if="phone_bill.status">{{ phone_bill.phone_bill_state_name }}</li>
              <li class="right" v-else>
                {{ order_data.status_name }}
                <span v-if="order_data.has_one_refund_apply" class="right-block">({{ order_data.has_one_refund_apply.refund_type_name }}：{{ order_data.has_one_refund_apply.status_name }})</span>
              </li>
            </ul>
            <ul class="tra" v-if="order_data.note">
              <li class="left">{{ $i18n.t('base.buyerNote') }}</li>
              <li class="right">{{ order_data.note }}</li>
            </ul>
            <ul class="tra" v-if="order_data.plugin_id == 40">
              <li class="left">租金总金额</li>
              <li class="right">{{ $i18n.t("money") }}{{ order_data.order_goods_price }}</li>
            </ul>
          </div>

          <div class="tbs-number-tra" v-if="orderType == 'travelAround' && travelAroundDetail">
            <ul class="number" v-if="travelAroundDetail.third_order_sn">
              <li class="left">中台订单号:</li>
              <li class="right">{{ travelAroundDetail.third_order_sn }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.channel_order_id">
              <li class="left">渠道订单编号:</li>
              <li class="right">{{ travelAroundDetail.channel_order_id }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.quantity">
              <li class="left">购买数量:</li>
              <li class="right">{{ travelAroundDetail.quantity }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.code_amount">
              <li class="left">已取码数量:</li>
              <li class="right">{{ travelAroundDetail.code_amount }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.city">
              <li class="left">城市名称:</li>
              <li class="right">{{ travelAroundDetail.city }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.idCard">
              <li class="left">身份证号:</li>
              <li class="right">{{ travelAroundDetail.idCard }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.customerName">
              <li class="left">客户姓名:</li>
              <li class="right">{{ travelAroundDetail.customerName }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.customerPhoneNumber">
              <li class="left">客户电话:</li>
              <li class="right">{{ travelAroundDetail.customerPhoneNumber }}</li>
            </ul>
            <ul class="tra" v-if="travelAroundDetail.address">
              <li class="left">客户地址:</li>
              <li class="right">{{ travelAroundDetail.address }}</li>
            </ul>
          </div>
          <div class="tbs-number-tra tbs-bottom" v-if="orderType == 'travelAround' && aroundOrderDetatil">
            <ul class="number" v-if="aroundOrderDetatil.lianlian_order_id">
              <li class="left">周边游子订单编号:</li>
              <li class="right">{{ aroundOrderDetatil.lianlian_order_id }}</li>
            </ul>
            <ul class="number" v-if="aroundOrderDetatil.channel_status_name">
              <li class="left">订单状态:</li>
              <li class="right">{{ aroundOrderDetatil.channel_status_name }}</li>
            </ul>
            <ul class="number" v-if="aroundOrderDetatil.status_name">
              <li class="left">发码状态:</li>
              <li class="right">{{ aroundOrderDetatil.status_name }}</li>
            </ul>
            <ul class="number" v-if="aroundOrderDetatil.importTime_at">
              <li class="left">发码时间:</li>
              <li class="right">{{ aroundOrderDetatil.importTime_at }}</li>
            </ul>
            <ul class="number" v-if="aroundOrderDetatil.refundDate_at">
              <li class="left">退款时间:</li>
              <li class="right">{{ aroundOrderDetatil.refundDate_at }}</li>
            </ul>
          </div>
          <div class="tbs-number-tra" v-if="orderType == 'hotel'">
            <ul class="number">
              <li class="left">入住日期:</li>
              <li class="right">{{ hotel_start }}</li>
            </ul>
            <ul class="number">
              <li class="left">离店日期:</li>
              <li class="right">{{ hotel_end }}</li>
            </ul>
            <ul class="number">
              <li class="left">天数:</li>
              <li class="right">{{ night_day }}天</li>
            </ul>
            <ul class="number">
              <li class="left">房间数量:</li>
              <li class="right">{{ order_data.goods_total }}间</li>
            </ul>
          </div>
          <template v-if="order_data.cashier_order">
            <div class="info">
              <ul class="time">
                <li class="left">下单时间:</li>
                <li class="right">{{ order_data.cashier_order.created_at }}</li>
              </ul>
              <ul class="name">
                <li class="left">姓名:</li>
                <li class="right">{{ order_data.cashier_order.realname }}</li>
              </ul>
              <ul class="member">
                <li class="left">电话:</li>
                <li class="right">{{ order_data.cashier_order.mobile }}</li>
              </ul>
            </div>
          </template>
          <div id="discount" v-if="check_data(order_data)">
            <template v-for="(info, ind) in order_data.order_discount">
              <ul class="Discount" :key="ind" v-if="!info.no_show">
                <li class="left">{{ info.name }}</li>
                <li class="right">{{ $i18n.t("money") }}{{ info.amount }}</li>
              </ul>
            </template>
            <template v-for="(item, index) in order_data.order_fees">
              <ul class="Discount" :key="index">
                <li class="left">{{ item.name }}</li>
                <li class="right">{{ $i18n.t("money") }}{{ item.amount }}</li>
              </ul>
            </template>
            <template v-for="(item, index) in order_data.order_deduction">
              <ul class="Discount" :key="'order_deduction' + index">
                <li class="left">{{ item.name }}</li>
                <li class="right">{{ $i18n.t("money") }}{{ item.amount }}</li>
              </ul>
            </template>
          </div>

          <template v-if="order_data.dispatch_price">
            <ul class="Fre">
              <li class="left">{{ order_data.dispatch_type_id == 11 ? "配送费" : "运费" }}</li>
              <li class="right">{{ $i18n.t("money") }}{{ order_data.dispatch_price }}</li>
            </ul>
          </template>
          <ul class="Fre">
            <li class="left">{{ $i18n.t('base.itemSubtotal') }}</li>
            <li class="right" v-if="!(order_data.plugin_id == 40 || order_data.plugin_id == 154)">{{ $i18n.t("money") }}{{ order_data.order_goods_price }}</li>
            <li class="right" v-if="order_data.plugin_id == 154">{{ $i18n.t("money") }}{{ order_data.has_many_travel_around_order_goods[0] && order_data.has_many_travel_around_order_goods[0].goods_price }}</li>
            <li class="right" v-if="order_data.plugin_id == 40">{{ $i18n.t("money") }}{{ order_data.order_goods_price }}</li>
          </ul>
          <ul class="Sub" v-if="order_data.plugin_id == 40">
            <li class="left">押金:</li>
            <li class="right">{{ $i18n.t("money") }}{{ order_data.lease_toy.deposit_total }}</li>
          </ul>
          <ul class="Real-pay">
            <li class="left fz-26" v-if="!(order_data.plugin_id == 40)">{{ $i18n.t('base.actualPaid') }}:</li>
            <li class="left" v-if="order_data.plugin_id == 40">合计:（押金{{ $i18n.t("money") }}{{ order_data.lease_toy.deposit_total }}可退）:</li>
            <li class="right" style="margin-left: 5px;" v-if="order_data.plugin_id == 154">
              <small>{{ $i18n.t("money") }}</small>
              {{ order_data.has_many_travel_around_order_goods[0] && order_data.has_many_travel_around_order_goods[0].goods_price }}
            </li>
            <li class="right pay-price"  v-else>{{ $i18n.t("money") }}{{ order_data.price }}</li>
          </ul>
          <ul class="photoGoods" v-if="!fun.isTextEmpty(order_data.photo_order_thumbs)" @click="showPhotoGoodsArr = true">
            <li v-for="(item, index) in order_data.photo_order_thumbs" :key="index">
              <img :src="item" referrerPolicy="no-referrer"/>
            </li>
          </ul>

        </div>
      </div>
      <div class="order_times">
        <ul class="Sub">
          <li class="left">{{ $i18n.t('base.orderNumber') }}</li>
          <li class="right">{{ order_data.order_sn }}</li>
        </ul>
        <ul class="Sub" v-if="order_data.pay_type_name">
          <li class="left">{{ $i18n.t('base.paymentMethod') }}</li>
          <li class="right">{{order_data.pay_type_name }}</li>
        </ul>
        <ul class="Sub" v-if="order_data.table_name">
          <li class="left">餐桌号</li>
          <li class="right">{{ order_data.table_name }}</li>
        </ul>
        <ul class="Sub">
          <li class="left">{{ $i18n.t('base.creationTime') }}</li>
          <li class="right">{{ order_data.create_time }}</li>
        </ul>
        <ul class="Sub" v-if="order_data.status >= 1">
          <li class="left">{{ $i18n.t('base.paymentTime') }}</li>
          <li class="right">{{ order_data.pay_time }}</li>
        </ul>
        <!--话费慢充-->
        <ul class="Sub" v-if="phone_bill.has_one_pre_order && phone_bill.has_one_pre_order.created_at">
          <li class="left">提交时间</li>
          <li class="right">{{ phone_bill.has_one_pre_order.created_at }}</li>
        </ul>
        <!--话费慢充end-->
        <ul class="Sub" v-if="order_data.status >= 2">
          <li class="left">{{ $i18n.t('base.shippingTime') }}</li>
          <li class="right">{{ order_data.send_time }}</li>
        </ul>
        <ul class="Sub" v-if="order_data.status >= 3">
          <li class="left">{{ $i18n.t('base.completionTime') }}</li>
          <li class="right">{{ order_data.finish_time }}</li>
        </ul>
        <!--话费慢充-->
        <ul class="Sub" v-if="phone_bill.has_one_pre_order && phone_bill.has_one_pre_order.has_one_call_back && phone_bill.has_one_pre_order.created_at">
          <li class="left">状态通知时间</li>
          <li class="right">{{ phone_bill.has_one_pre_order.has_one_call_back.created_at }}</li>
        </ul>
        <ul class="Sub" v-if="(phone_bill.status == 4 || phone_bill.status == 5) && phone_bill.has_one_pre_order">
          <li class="left">交易错误</li>
          <li class="right" style="color: #f15353;">{{ phone_bill.has_one_pre_order.return_msg }}</li>
        </ul>
        <!--话费慢充end-->
      </div>

      <div class="kefu" v-if="order_data.has_many_order_goods && order_data.has_many_order_goods.length > 0 && orderType != 'yunChat'" @click="getKefu"><i class="iconfont icon-linedesign-20"></i><span>{{ $i18n.t('base.contactCustomerService') }}</span></div>

      <!-- 自定义信息 -->
      <div style="margin: -2.5rem 0.625rem 3.5rem 0.625rem;">
        <customMessage :listMap="customForm"></customMessage>
      </div>

      <div style="height: 3rem;"></div>
      <div class="detail_pay" :class="{'row-reverse':order_data.has_one_pay_type&&order_data.has_one_pay_type.code=='unPay'}" v-if="show_detail_pay == 1">
        <div class="subscribe order_delete red-button" @click.stop="subscribeOn(aroundOrderDetatil.qr_code_url)" v-if="orderType == 'travelAround' && aroundOrderDetatil">核销链接</div>
        <!--卡券信息不能再更多里显示  前端判断 卡券类型为2  待收货 和已完成才显示-->
        <div
          class="order_delete red-button"
          v-if="(order_data.status == 2 || order_data.status == 3) && order_data.camilo_resources_coupon_type == 2"
          @click.stop="operation({ value: 140 }, order_data)"
        >
          卡券信息
        </div>
        <template  v-for="(item, index) in order_data.button_models">
          <div
              v-if="index < 3"
              :key="index" class="order_delete"
              :class="{'red-button' :item.value == 1 }"
              @click="operation(item, order_data)">
              {{ item.name }}
          </div>
          <div
            :key="index"
            v-if="index == 3 && order_data.button_models.length > 3"
            class="more-button-1"
            @click.stop="showMore(order_data.order_sn)">
            更多
          </div>
          <div class="more-button"
                :key="index"
                v-if="index == 1 && showID == order_data.order_sn && order_data.button_models && (order_data.button_models.length > 2 || Object.values(order_data.button_models).length > 2)">
                <template v-for="(item, i) in order_data.button_models">
                  <p :key="i" v-if="i >= 3" @click="operation(item, order_data)"
                    :class="[!item.api && item.value != '41' ? 'noClickBG' : '']">{{ item.name }}</p>
                </template>
              </div>
         </template>
      </div>

      <div class="qrcode">
        <van-popup v-model="showQrcode" position="center" modal="true">
          <img :src="qrcode" style="width: 100%;" />
          <div style="height: 1.875rem;">请核销员扫码</div>
        </van-popup>
      </div>

      <yz-service v-model="showKefu" :orderType="orderType" :order_id="order_id" :url="cservice" :mobile="service_mobile" :qr="service_QRcode"></yz-service>

      <van-dialog v-model="dialogVisible" :showConfirmButton="false" class="logistics-pop">
        <div class="title">确认发货</div>
        <section style="width: 100%; text-align: left; overflow: auto;">
          <div class="addressee" v-if="addresseeInfo && jurisdiction_set != 1">
            <div class="row-title">
              收件人信息:
            </div>
            <div class="user-info">
              <div>
                <span>{{ addresseeInfo.realname }}</span>
                <span>({{ addresseeInfo.mobile }})</span>
              </div>
              <div style="margin-bottom: 10px;">{{ addresseeInfo.address }}</div>
            </div>
          </div>
          <div style="display: flex; width: 100%; height: 45px; line-height: 45px;">
            <div class="row-title" style="width: 28%; height: 45px;">快递公司:</div>
            <div style="height: 45px; width: 60%;" class="logistics-company">
              <van-button plain type="primary" @click="seleRegional">
                {{ regional }}
              </van-button>
            </div>
          </div>
          <div style="display: flex; width: 100%; height: 45px; line-height: 45px;" class="logistics-num">
            <div class="row-title" style="width: 28%; height: 45px;">快递单号:</div>
            <div style="height: 45px; width: 60%; text-align: right;">
              <van-cell-group>
                <van-field v-model="numberName" placeholder="请输入快递单号" />
              </van-cell-group>
            </div>
          </div>
        </section>
        <div class="foot">
          <van-button type="default" style="width: 50%;" @click="sendCancel">取 消 </van-button>
          <van-button type="primary" style="width: 50%;" @click="sendGoogs">确 定 </van-button>
        </div>
      </van-dialog>

      <van-popup v-model="dateshow_1" position="bottom" :overlay="true">
        <van-search class="express-select-search" @input="filterCom" @clear='clearCom' placeholder="请输入快递公司名称" clearable v-model="inputExpressCompanyName" v-show="columns.length > 0"></van-search>
        <van-picker :columns="filterExpressCompanys" @cancel="onCancelbtn" @confirm="onConfirmbtn" show-toolbar />
      </van-popup>

      <van-popup v-model="showDFData" position="bottom" closeable round :overlay="true" :style="{ height: '80%' }" style="padding-top: 3.25rem;">
        <!-- <c-dyPopup :datas="dfData" v-if="showDFData" :status="false"></c-dyPopup> -->
        <diyfrom v-if="dfData" :modeType="'Single'" :singleStatus="false" :singleDatas="dfData" :desThumb="false" :memberBtn="false"> </diyfrom>
      </van-popup>

      <van-image-preview v-model="showPhotoGoodsArr" :images="PhotoGoodsArr" @change="onChangePhotoGoods"></van-image-preview>

      <van-dialog v-model="showBarter" title="易货兑换" show-cancel-button class="barter_dialog" @confirm="confirmBarter" @cancel="cancelBarter">
        <div class="barter_dialog_1">是否确认易货兑换</div>
        <div class="barter_dialog_2">该商品可兑换易货值为{{ showBarter_value }}</div>
      </van-dialog>

      <!--消费红包-->
      <van-overlay :show="showPacket" @click="showPacket = false">
        <div class="wrapper">
          <div class="block" @click.stop>
            <img @click="toPacket" src="../../../assets/images/consume_packet.png" />
          </div>
        </div>
      </van-overlay>

      <div class="fixed-box" v-show="!showPacket && hasPacket" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
        <img @click="showPacket = true" class="rotate" :class="[{ r1: shrinkPacket }, { r2: !shrinkPacket }]" src="../../../assets/images/consume_packet.png" />
      </div>
      <!--消费红包end-->

      <!-- 盲盒 -->
      <van-overlay :show="blindBoxInfo.show" z-index="99">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
          <transition name="van-fade">
            <div class="blindBoxInfo" v-if="blindBoxInfo.show">
              <div class="multipleWrapper">
                <div class="desc">盲盒商品</div>
                <div class="goodsWrapper" @touchmove.stop>
                  <router-link
                    :to="
                      fun.getUrl(detailUrl == 'HotelOrderDetail' ? 'HotelOrderDetail' : detailUrl, {
                        order_id: item.id,
                        orderType: orderType
                      })
                    "
                    v-for="item in blindBoxInfo.goods"
                    :key="item.id"
                  >
                    <div class="goodsItem">
                      <div class="goodInfo">
                        <div class="c1">{{ item.order_sn }}</div>
                        <div class="c2">{{ item.status_name }}</div>
                      </div>
                      <div class="goodContent" v-for="item1 in item.has_many_order_goods" :key="item1.id">
                        <div class="goods_img">
                          <img :src="item1.thumb" alt="" referrerPolicy="no-referrer"/>
                        </div>
                        <div class="content">
                          <div class="name">{{ item1.title }}</div>
                          <div class="price">{{ item1.goods_option_title }}</div>
                        </div>
                      </div>
                    </div>
                  </router-link>
                </div>
              </div>

              <div class="close">
                <i class="iconfont icon-adsystem_icon_cancle" @click="blindBoxInfo.show = false"></i>
              </div>
            </div>
          </transition>
        </div>
      </van-overlay>

      <van-popup v-model="refundShow" position="bottom" round closeable :style="{ height: '50%' }">
        <div class="refundShow-box">
          <div class="popup-title">关闭原因</div>
          <div class="popup-context">{{ refundText }}</div>
        </div>
      </van-popup>
    </div>

    <!-- 线下订单-详情页 -->
    <offline-order-detail v-if="orderType == 'ysSystem'" :order_data="order_data"></offline-order-detail>
    <van-dialog v-model="custom_receipt_confirmation_show" :title="custom_receipt_confirmation_btn.name" show-cancel-button @confirm="CustomReceiptConfirmationSend">
      <div v-html="custom_receipt_confirmation_html" class="custom_receipt_confirmation_html"></div>
    </van-dialog>

    <van-dialog v-model="inventoryApplyPopup" class="inventory-apply-popup" title="请选择" show-cancel-button @confirm="confirmInventoryApply">
      <van-radio-group v-model="inventoryApplyRadio">
        <van-radio :name="item.id" v-for="item in inventoryApplyList" :key="item.id" checked-color="#ee0a24">{{ item.name }}</van-radio>
      </van-radio-group>
    </van-dialog>

    <!-- 新盲盒 -->
    <issue-goods pageType="blind_box" :overlayShow.sync="overlayShow" v-if="overlayShow" :newBlindBoxData="newBlindBoxData"></issue-goods>
    <drawGoods :drawShow.sync="drawShow" :type="drawType" v-if="drawShow" :newBlindBoxData="newBlindBoxData"></drawGoods>
    <van-popup v-model="noteShow" position="bottom" round :style="{ maxHeight: '30rem' }">
      <div class="serviceBox" v-if="cloud_note">
        <div class="serviceBox_top">
          <div class="serviceBox_top_l">{{ cloud_note.name }}须知</div>
          <div class="serviceBox_top_r" @click="noteShow = false">
            <i class="iconfont icon-icon_close"></i>
          </div>
        </div>
        <div class="serviceBox_rule" v-html="cloud_note.detail_desc"></div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import order_detailcontroller from "./order_detailcontroller";

export default order_detailcontroller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.reserveClass{
    font-size: 0.75rem;
    color: #f15353;
    margin-top: 0.375rem;
    text-align: left;
    height: 0.75rem;
    line-height: 0.75rem;
    margin-bottom: 0.375rem;
}
.preorder-store-area{
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem; font-size: 1rem;font-weight: bold;
}
.order-detail ::v-deep .van-nav-bar .van-icon{
  font-size:1.1875rem;
  color: #00001C;
}
.order-detail ::v-deep .van-nav-bar__title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #00001C;
}
.order-detail .c-E7EAF9{
  background-color: #E7EAF9 !important;
}
.order-detail ::v-deep .van-nav-bar{
  background-color: transparent;
  border-bottom: transparent;
}
.order-detail ::v-deep .van-button--default{
  background-color: transparent;
}
.order-detail {
  position: relative;
}
.order-detail .head-bg{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height:8.125rem;
  background: linear-gradient(179deg, #E7EAF9 0%, #FCF2F1 63%, rgba(252,242,241,0) 100%);
}
.supplier-member{
  margin-bottom: 0.3125rem;
  display: flex;
  align-items:center;
  .supplier-member-receiver{
    font-size: 1rem;
    font-weight:bold;
    margin-right: 0.3125rem;
  }
  .supplier-member-mobile{
    font-size: 0.875rem;
    height:1rem;
  }
}
.wrapper-box{
  background: #FFFFFF;
  border-radius: 0.5rem;
  overflow:hidden;
  margin:0.625rem 0.75rem;
}
.qrcode {
  width: 100%;
  margin: 0 auto;
}

#goodsinfo .van-dialog {
  width: 90%;
  padding: 1rem;
  height: 22rem;
  max-width: 350px;

  .van-dialog__content {
    section {
      height: 15rem;
    }

    .title {
      padding-bottom: 1.5rem;
      font-weight: bold;
    }
  }
}

#goodsinfo {
  min-height: 110vh;
  z-index: 10;

  .addr {
    text-align: left;
    padding: 0.75rem;
    margin: 0.625rem;
    background: #fff;
    border-radius: 10px;
    display: flex;
    position: relative;

    .addrTxt {
      color: #ff2424;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    i {
      font-size: 1rem;
      color: #333;
      margin-right: 0.625rem;
      margin-top: 0.0625rem;
      justify-content: center;
      align-self: center;
    }

    p {
      text-align: left;

      span {
        color: #858585;
        font-size: 12px;
      }
    }

    .addr-info {
      font-size: 14px;
    }

    .clearfix {
      clear: both;
    }

    .map-navigation {
      position: absolute;
      right: 1rem;
      top: 2rem;

      .icon-all_daohang {
        font-size: 1.875rem;
        color: #f14e4e;
        margin: 0;
      }
    }

    .operation-style {
      display: flex;

      .copy-box {
        margin-top: 0.75rem;
        display: flex;
        justify-content: space-around;
        width: 100%;
        font-size: 0.85rem;

        > div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 6rem;
          height: 2rem;
          border-radius: 1rem;
        }

        .contact-recipient {
          background-color: #ff5f5f;
          color: #fff;

          a {
            display: none;
          }

          i {
            margin-right: 2px;
            color: #fff;
          }
        }

        .copy-address {
          background-color: #fff;
          color: #ff5f5f;
          border: 1px solid #ff5f5f;

          i {
            margin-right: 2px;
            color: #ff5f5f;
          }
        }
      }
    }
  }

  .goods-box {
    background-color: #fff;
  }
  .goods-wrapper{
    border-bottom:1px solid #F5F5F5;
    padding-bottom: 0.625rem;
    margin: 0.625rem;
  }
  .goods {
    display:flex;
    .goods-right{
      flex:1;
      display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
    .member-info{
      display:flex;
      align-items:center;
    }
    .member-integral{
      color:#F38D54;
      font-size:0.6875rem;
      padding:0.1875rem 0.3125rem;
      border-radius:0.25rem;
      font-weight: 400;
      background-color: #FEF1EA;
      margin-left:0.3125rem;
    }
    .img {
      margin-right:0.5625rem;
      flex-shrink:0;
      width:5.375rem;
      box-sizing: border-box;
      img {
        width: 100%;
        border-radius: 0.5rem;
        margin:0;
      }
    }
    .dfStyle {
      flex-shrink: 0;
      width: 4.375rem;
      height: 1.75rem;
      line-height: 1.75rem;
      text-align: center;
      border-radius: 1.875rem ;
      font-size: 0.8125rem;
      opacity: 1;
      border: 1px solid #AAAAB3;
    }
    .between{
      display:flex;
      align-items:center;
      justify-content: space-between;
    }
    .inner {
      padding-top: 0.1563rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .inner-title{
      display: flex;
      justify-content: space-between;
      align-items:center;
      width: 100%;
    }

    .name {
      width: 12.1875rem;
      text-align: left;
      font-size: 0.875rem;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      color: #00001C;
    }

    .money {
      font-size: 14px;
    }

    small {
      font-size: 12px;
    }

    .price {
      text-align: right;
    }

    .option {
      color: #9898A1;
      font-size: 0.8125rem;
      flex: 1;
      display: flex;
      line-height: 14px;
      margin-top: 0.5313rem;
      margin-bottom: .625rem;
      p{
          text-align: left;
      }
    }

    .num {
      font-size: 0.8125rem;
      color: #00001C;
    }


    .current-price{
      text-align: left;
      font-weight: bold;
      font-size: 0.875rem;
      font-weight: bold;
      color: #00001C;
    }
    .price-box{
      flex:1;
    }
  }
  .comment-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 0.8125rem;

      .view-comment-btn {
        min-width: 4.375rem;
        border-radius:1.875rem;
        margin-left: 0.5rem;
        padding: 0.25rem 0.625rem;
        border: 0.0625rem solid #f15353;
        color: #f15353;
      }

      .comment-btn {
        min-width: 4.375rem;
        color: #565656;
        margin-left: 0.5rem;
        padding: 0.25rem 1.25rem;
        border-radius: 1.875rem;
        border: 0.0625rem solid #9f9c9c;
      }
    }
  .detail_good {
    background: #fff;

    .content {
      text-align: left;
      background: #efeded;
      padding: 0.625rem;
      color: #8c6700;
    }

    a {
      color: #000;
    }

    h3 {
      text-align: left;
      margin: 0.5625rem 0;

      i {
        font-size: 1.25rem;
        padding-right: 0.3125rem;
      }
    }
  }

  .tbs {
    font-size: 14px;
    .left {
      flex: 2;
      text-align: left;
    }

    .right {
      flex: 3;
      text-align: right;
    }

    .tbs-number-tra {
      background-color: #fff;
      width: 100%;
      padding: 0 0.75rem;
      margin-top: 0.625rem;
      border-radius: 10px;

      li {
        line-height: 1.875rem;
      }
    }

    .tbs-bottom {
      border-top: solid 0.0625rem #ebebeb;
    }

    .Sub {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 1.875rem;
      // padding: 0 0.875rem 0.625rem 0.875rem;
      background-color: #fff;
    }

    .Real-pay {
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      line-height: 2.25rem;
      padding: 0 0.875rem;
      font-size: 16px;
      .pay-price{
        margin-left: 5px;
        font-size: 0.9375rem;
        font-weight: bold;
        color: #F15353;
      }
      .fz-26{
        font-size: 0.8125rem;
      }

      .left {
        color: #333;
        text-align: right;
      }

      .right {
        color: #f15353;
        font-size: 18px;
        flex: 0;
        display: flex;
      }

      small {
        font-size: 12px;
      }
    }

    .photoGoods {
      display: flex;
      flex-wrap: wrap;
      margin-top: 1rem;
      padding: 1rem;
      background: #fff;

      li {
        width: 4.25rem;
        height: 4.25rem;
        margin-right: 0.5rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .Fre {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 0 0.75rem;
      line-height: 1.875rem;
      .left{
        color:#9898A1;
        font-size:0.8125rem;
        font-weight: 500;
      }
      .right{
        color:#00001C;
        font-size:0.8125rem;
        font-weight: 500;
      }
    }

    #discount {
      // margin-top: 0.625rem;
      // padding-top: 0.625rem;
      background-color: #fff;
    }

    .Discount {
      width: 100%;
      line-height: 1.875rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.75rem;
      .left{
        color:#9898A1;
        font-size:0.8125rem;
        font-weight: 500;
      }
      .right{
        color:#00001C;
        font-size:0.8125rem;
        font-weight: 500;
      }
    }

    .number,
    .tra {
      line-height: 1.75rem;
      display: flex;
      justify-content: space-between;
      .left{
        color:#9898A1;
        font-size:0.8125rem;
        font-weight: 500;
      }
      .right{
        color:#00001C;
        font-size:0.8125rem;
        font-weight: 500;
      }

      .right-block {
        color: rgb(241, 83, 83);
        display: block;
        line-height: 1rem;
      }
    }

    .Pay-method {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 2.25rem;
      padding: 0 0.875rem;
      border-top: solid 0.0625rem #ebebeb;
    }

    .info {
      padding: 0 0.75rem;
      line-height: 1.75rem;
      border-top: solid 0.0625rem #e2e2e2;

      .time,
      .name,
      .member {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .row-reverse{
    flex-direction: row-reverse;
    justify-content: unset !important;
  }
  .detail_pay {
    position: relative;
    min-height: 3.0625rem;
    width: 100%;
    background: #fff;
    padding: 0 0.75rem;
    border-top: 1px solid #ebebeb;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;


    .subscribe {
      border: 0.0625rem solid #f14e4e;
      background-color: #f14e4e;
      color: #fff;
      cursor: pointer;
    }

    .more-button-1{
      position: relative;
      height: 2rem;
      margin-left: 0.1563rem;
      line-height: 2rem;
      font-size: 0.8125rem;
      color:#9898A1;
      order: -1;
      flex: 1;
      text-align: left;
    }
      .order_delete {
      min-width: 4.8125rem;
      margin-left: 0.5rem;
      background: #fff;
      height:2rem;
      line-height: 2rem;
      border-radius: 1.875rem;
      color: #333;
      border: 1px solid #AAAAB3;
      font-size:0.8125rem;
      padding:0 0.7813rem;
    }

    .red-button {
      border: 0.0625rem solid #f14e4e;
      background-color: #f14e4e;
      color: #fff;
    }

    .noClickBG {
      border: 0.0625rem solid #e8e8e8;
      background: #e8e8e8;
      color: #999;
    }

    input {
      padding: 0.25rem 0.625rem;
      border: solid 0.0625rem #666;
      border-radius: 0.1875rem;
      background-color: #fff;
      margin-top: 0.6875rem;
      float: right;
      color: #333;
      font-size: 12px;
    }

    .trans {
      position: absolute;
      right: 1.875rem;
      bottom: 2.5rem;
      width: 0;
      height: 0;
      border-width: 0.8rem 0.8rem 0;
      border-style: solid;
      border-color: #f5f5f5 transparent transparent;
    }

    .more-button {
      position: absolute;
      width: 5.625rem;
      min-height: 2.25rem;
      background: #FFFFFF;
      box-shadow: 0px 0.0938rem 0.5rem 0.0313rem #E9E9E9;
      border-radius: 0.3125rem;
      opacity: 1;
      border: 1px solid #E3E3E3;
      border-radius: 5px;
      left: 0.75rem;
      bottom: 3rem;

      &:before,
      &:after {
        position: absolute;
        content: '';
        border: 10px solid;
      }

      &::after {
        border-color: #fff transparent transparent transparent;
        left: 4px;
        bottom: -19px;
      }

      &::before {
        left: 4px;
        bottom: -20px;
        border-color: #E3E3E3 transparent transparent transparent;
      }

      p {
        text-align: center;
        height: 2.25rem;
        line-height: 2.25rem;
        font-size: 0.8125rem;
        border-top: 1px solid #e2e2e2;
      }
    }
  }

  .rent-info {
    border-bottom: solid 0.0625rem #e2e2e2;
    background-color: #fff;

    ul {
      padding: 1rem 0.875rem;

      li {
        display: flex;
        justify-content: space-between;
        line-height: 1.5rem;
        font-size: 14px;

        span:first-child {
          color: #8c8c8c;
        }
      }
    }

    .info {
      border-top: solid 0.0625rem #ebebeb;
      margin: 0 0.875rem;
      line-height: 1.875rem;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }
  }

  .commodity {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;

    .jpg {
      width: 30%;
      overflow: hidden;
      margin-right: 0.625rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    ul {
      position: relative;
      width: 70%;

      li {
        display: flex;
        justify-content: space-between;
      }

      li:first-child {
        margin-bottom: 0.625rem;

        .left {
          text-align: left;
          width: 60%;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        i {
          font-size: 0.75rem;
          color: #ff9500;
        }
      }

      .red {
        font-size: 14px;
        color: #f15353;

        small {
          font-size: 12px;
          color: #333;
          margin-left: 0.625rem;
        }
      }

      .left {
        font-size: 14px;
      }

      .rent {
        position: absolute;
        bottom: 0;
      }
    }
  }

  .order_times {
    background: #fff;
    margin: 0.625rem 0.75rem;
    padding:0.25rem 0.6563rem 0.4688rem 0.7813rem;
    border-radius: 0.5rem;

    .Sub {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 1.875rem;
      height: 1.875rem;

      .left {
        flex: 2;
        text-align: left;
        color:#9898A1;
        font-size:0.8125rem;
        font-weight: 500;
      }

      .right {
        flex: 3;
        text-align: right;
        color:#00001C;
        font-size:0.8125rem;
        font-weight: 500;
      }
    }
  }
}

#goodsinfo.pcStyle {
  .detail_pay {
    width: 375px;
  }
}

.barter_dialog {
  height: auto;

  .barter_dialog_1 {
    padding: 0.875rem 0;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
  }

  .barter_dialog_2 {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #ee0a24;
  }
}

.inventory-apply-popup {
  height: auto;
  padding: 0;

  ::v-deep .van-dialog__content {
    padding: 0 0.875rem 0.875rem;
    max-height: 15rem;
    overflow-y: scroll;
    text-align: left;

    .van-radio {
      padding: 0.875rem 0;
    }
  }
}

.mint-header {
  background: none;
  color: #666;
}

.is-fixed .mint-header-title {
  font-weight: bold;
}

.mint-header.is-fixed {
  border-bottom: 0.0625rem solid #ebebeb;
  background: #fff;
  z-index: 99;
}

.is-right a {
  font-size: 12px;
}

.addr1 {
  padding: 0 !important;
}
.addr-shopApply {
  background: #FFFFFF;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  padding:0.8125rem 0.75rem;
  margin: 10px;
  font-weight: 500;
  font-size: 0.875rem;
  color: #00001C;
  text-align: left;
  p {
    &:first-child {
      padding:0 0 0.3125rem 0;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 14rem;
    height: 18rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.fixed-box {
  position: fixed;
  left: 5px;
  bottom: 6rem;
  width: 2rem;
  height: 2.5rem;

  img {
    width: 2rem;
    height: 2.5rem;
  }

  .r1 {
    transform: rotate(-5deg);
  }

  .r2 {
    transform: rotate(3deg);
  }
}

.fixed-box.pcStyle {
  left: 40%;
  transform: translateX(-50%);
}

.kefu {
  padding: 0.9688rem;
  display: flex;
  margin: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #00001C;
  box-sizing: border-box;

  .icon-linedesign-20 {
    font-size: 20px;
    color: rgb(241, 83, 83);
    margin-right: 3px;
  }
}

.blindBoxInfo {
  .close {
    height: 4rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;

    .icon-adsystem_icon_cancle {
      font-size: 3rem;
      color: #fff;
      width: 3rem;
      height: 3rem;
    }
  }

  .multipleWrapper {
    width: 18.906rem;
    height: 22.25rem;
    background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/blindToast.png);
    background-size: 100% 100%;

    .desc {
      padding-top: 1.45rem;
      padding-bottom: 0.906rem;
      font-size: 0.938rem;
      color: #fff;
    }

    .goodsWrapper {
      margin: 0 auto;
      padding: 0 0.1rem;
      width: 16.031rem;
      height: 17.6rem;
      border-radius: 0.625rem;
      overflow: scroll;

      .goodsItem {
        width: 100%;
        margin-bottom: 0.6rem;
        background-color: #fff;
        border-radius: 0.313rem;

        .goodInfo {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.531rem 0.469rem;
          font-size: 0.625rem;

          .c1 {
            color: #666;
          }

          .c2 {
            color: #f14e4e;
          }
        }

        .goodContent {
          display: flex;
          padding-bottom: 0.5rem;

          .goods_img {
            height: 3.125rem;
            padding: 0 0.5rem;
            border-radius: 0.125rem;

            img {
              width: 3.125rem;
              height: 3.125rem;
              border-radius: 0.125rem;
            }
          }

          .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 3.125rem;
            padding-right: 1.3rem;
            text-align: left;

            .name {
              font-size: 0.75rem;
              color: #333;
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .price {
              font-size: 0.625rem;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.refundShow-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .popup-title {
    height: 3rem;
    line-height: 3rem;
    font-size: 18px;
    font-weight: bold;
  }

  .popup-context {
    flex: 1;
    overflow: scroll;
    padding: 0 0.875rem 0.875rem;
    text-align: left;
    text-indent: 26px;
  }
}

.deposit-tips-1{
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 5px;
    background-color: RGBA(241, 83, 83, 0.1);
    color: #f15353;
   margin-right: 5px;
}
.deposit-tips {
  margin-right: 5px;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-items: flex-start;
  span{
    font-size: 11px;
    height: 1.0625rem;
    line-height: 1.0625rem;
    padding: 0 0.3125rem;
    border-radius: 0.25rem;
    background-color: RGBA(241, 83, 83, .1);
    color: #f15353;
  }
}

.give_integral_wrapper {
  position: relative;
  display: inline-flex;
  text-align: left;
  padding-left: 0.5rem;
  // float: right;
  // width: 75%;

  .give_integral_text {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.094rem !important;
    height: 1.094rem !important;
    font-size: 0.688rem;
    color: #fff;
    background-color: #ec544a;
    border-radius: 50%;
  }

  .give_integral_num {
    display: inline-flex;
    align-items: center;
    height: 1.094rem !important;
    padding: 0 0.5rem 0 1.3rem;
    font-size: 0.688rem;
    color: #ec544a;
    background-color: #fff5f4;
    border-radius: 15%;
  }
}

.custom_receipt_confirmation_html {
  max-height: 20rem;
  padding-top: 0.8rem;
  overflow-y: scroll;

  ::v-deepimg {
    max-width: 100%;
    object-fit: cover;
  }
}

::v-deep .logistics-pop {
  .row-title {
    font-size: 15px;
    font-weight: bold;
    min-height: 1.875rem;
    line-height: 1.875rem;
  }

  .addressee {
    .user-info {
      font-size: 14px;
      min-height: 1.5rem;
      line-height: 1.5rem;
      overflow: visible;
      color: #8c8c8c;
    }
  }

  .logistics-company {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .van-button--primary {
      color: #1989fa;
      text-align: right;
      border: none !important;
    }
  }

  .logistics-num {
    .van-field__body {
      input {
        text-align: right;
      }
    }
  }

  .foot {
    display: flex;
    justify-content: space-between;

    .van-button {
      width: 50%;
      height: 3.125rem;
      background: #fff;
      font-size: 16px;
    }

    .van-button--primary {
      color: #1989fa;
      border: solid 0.0625rem #ebebeb;
    }
  }
}

.vipPirce {
  font-weight: 500;
  color: #F38D54;
  font-size:0.75rem;
  text-align: left;
}
.cloud_service_notes{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0.35rem;
  .notes{
    margin-right: 0.5rem;
    font-size: 0.63rem;
    color: #F15353;
    font-weight: 400;
    padding: 0.13rem 0.19rem;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 0.13rem;
    border: 0.03rem solid #F15353;
    line-height: 0.75rem;
    display: flex;
    align-items: center;
    .icon-advertise-next{
      font-size: 0.7rem;
      color: #F15353;
    }
  }
  .notes:last-child{
    margin-right: 0;
  }
}
.serviceBox {
  padding: 1.19rem 0.75rem 0 0.75rem;
  .serviceBox_lis {
    .lis {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.44rem;
      .icon-baozhang {
        color: #f15353;
      }
      .lis_conten {
        flex: 1;
        text-align: left;
        margin-left: 0.28rem;
        .lis_conten_top {
          font-weight: 500;
          font-size: 0.94rem;
          color: #00001c;
          line-height: 1rem;
          margin-bottom: 0.84rem;
        }
        .lis_des {
          font-size: 0.81rem;
          color: #999999;
        }
      }
      .icon-advertise-next {
        color: #808080;
      }
    }
  }
  .serviceBox_rule {
    margin-top: 1.44rem;
  }
  .serviceBox_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.53rem;
    .serviceBox_top_l {
      font-weight: bold;
      font-size: 1rem;
      color: #00001c;
    }
    .serviceBox_top_r {
      width: 1.5rem;
      height: 1.5rem;
      background: #f0f0f1;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-ico_close {
        color: #6e6e79;
        font-size: 0.9rem;
      }
    }
  }
}
</style>
